<template>
  <div class="navmain">
    <ul class="menu">
      <li v-for="(navList, index) in menu" :key="index" class="forRealitive">
        <h1 class="sidebar-link" @click="clickMenu(navList)">
          <i :class="'iconfont icon-' + navList.icon"></i>
          <h2>{{ navList.label }}</h2>
        </h1>
        <ol class="menu-sub">
          <li v-for="(item, idx) in navList.children" :key="idx">
            <h2 class="section-link" @click="clickMenu(item)">
              {{ item.label }}
            </h2>
          </li>
        </ol>
      </li>
      <li>
        <h1>
          <router-link
            tag="a"
            target="_blank"
            :to="{ name: 'Index' }"
            class="deploy"
          >
            <i class="iconfont icon-shezhi"></i>
            <h2>后台管理</h2>
          </router-link>
        </h1>
      </li>
      <li>
        <h1 @click="logOut">
          <i class="iconfont icon-shezhi"></i>
          <h2>退出登录</h2>
        </h1>
      </li>
    </ul>
  </div>
</template>

<script>
import mixin from '@/api/mixin.js'
export default {
  mixins: [mixin],
  data() {
    return {
      isShow: -1
    }
  },
  methods: {
    clickMenu(item) {
      this.$router.push({ name: item.name })
      this.$emit('getChild', this.isShow)
      this.$store.commit('settitlename', item.label)
    },
    logOut() {
      this.$confirm('确定注销并退出系统吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.$store.dispatch('LogOut').then(() => {
            location.href = '/sr'
          })
        })
        .catch(() => {})
    }
  },
  mounted() {
    this.isShow = -1
  }
}
</script>

<style lang="scss" scoped>
.navmain {
  position: relative;
  width: 3.5rem;
  height: 100%;
  background: url(../../assets/images/img51.png) no-repeat;
  background-size: 100% 100%;
  .menu {
    display: flex;
    height: 100%;
    flex-direction: column;
    & > li:hover {
      h1 {
        border: 2px solid rgb(2, 175, 255);
      }
    }
    & > li {
      flex: 1;
      display: block;
      position: relative;
      padding-left: 1.1rem;
      margin-right: 2.5rem;
      h1 {
        width: 0.7rem;
        height: 0.7rem;
        margin-top: 0.15rem;
        font-size: 18px;
        text-align: center;
        background: url(../../assets/images/img34.png) no-repeat;
        background-size: 100% 100%;
        cursor: pointer;
        padding-top: 0.1rem;
        i {
          font-size: 0.3rem;
          font-weight: 600;
          background-image: -webkit-linear-gradient(
            bottom,
            #02becf,
            #01afe1,
            #01a2f1
          );
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
        }
        h2 {
          font-size: 0.13rem;
          margin-top: 0.08rem;
          background-image: -webkit-linear-gradient(
            bottom,
            #d8e2e7,
            #a7dceb,
            #95cde9
          );
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
        }
      }

      ol {
        display: none;
        position: absolute;
        left: 1.8rem;
        top: 0.15rem;
        background: url(../../assets/images/img27.png) no-repeat;
        background-size: 100% 100%;
        width: 1.6rem;
        box-sizing: border-box;
        padding: 0 0.35rem;
        color: #fff;
        & > li {
          height: 0.45rem;
          line-height: 0.45rem;
          cursor: pointer;
        }
        & > li:hover {
          color: #01afe1;
          font-weight: 600;
          font-size: 0.14rem;
        }
      }
    }
  }
}
.menu li:hover ol {
  display: block;
}
</style>